import type { FormProps } from "antd";
import { Button, Form, Input, message, Rate, Select, Upload } from "antd";
import { httpPost } from "@utils/HttpUtil";
import { getUploadUrl } from "@utils/WeStudyUtil";
import { UploadOutlined } from "@ant-design/icons";
import TextArea from "antd/es/input/TextArea";
import SelectKnowledgeTree from "src/common/component/SelectKnowledgeTree";

type FieldType = {
  title?: string;
  questionImg?: any;
  choiceA?: string;
  choiceB?: string;
  choiceC?: string;
  choiceD?: string;
  answer?: string;
  explainImg?: any;
  explainText?: any;
  rate?: any;
  knowledge?: any;
};

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  console.log("Success:", values);
  var select = values.answer;
  if(select === "A"){
    values.answer = values.choiceA;
  }else if(select === "B"){
    values.answer = values.choiceB;
  }else if(select === "C"){
    values.answer = values.choiceC;
  }else if(select === "D"){
    values.answer = values.choiceD;
  }
  //提交题目
  var problemId = httpPost("/problem/submitProblem", {
    type: "choice",
    title: values.title,
    content: values,
  }).data;
  //提交知识题目关联关系
  httpPost("/problemKnowledge/editProblemKnowledge",{
    problemId: problemId,
    KnowledgeList: values.knowledge
  });
  message.success("新增题目成功");
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
  message.error("新增题目失败"+errorInfo);
};

const onChange = (value: string) => {
  console.log(value);
};

const normFile = (e:any) =>{
  if(Array.isArray(e)){
      return e;
  }
  return e && e.fileList;
}

const FunctionSubmitChoice = () => {

  const uploadUrl = getUploadUrl();

  const [form] = Form.useForm();

  const handleChildChange = (value: any) => {
    form.setFieldsValue({knowledge: value});
  }

  return (
    <>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 40 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType> label="题目（标题）" name="title" required>
          <TextArea rows={6} placeholder={"题目文字标题"} maxLength={1000} />
        </Form.Item>

        <Form.Item<FieldType>
          label="题目（图片）"
          name="questionImg"
          required
          // 下面两条必须存在
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload action={uploadUrl} listType="picture" maxCount={1}>
            <Button type="primary" icon={<UploadOutlined />}>
              上传题目截图
            </Button>
          </Upload>
        </Form.Item>

        <Form.Item<FieldType>
          label="选项A"
          name="choiceA"
          rules={[{ required: true, message: "请输入选项A!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项B"
          name="choiceB"
          rules={[{ required: true, message: "请输入选项B!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项C"
          name="choiceC"
          rules={[{ required: true, message: "请输入选项C!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="选项D"
          name="choiceD"
          rules={[{ required: true, message: "请输入选项D!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="答案"
          name="answer"
          rules={[{ required: true, message: "请输入答案!" }]}
        >
          <Select
            placeholder="请选择答案选项"
            optionFilterProp="label"
            onChange={onChange}
            options={[
              { value: "A", label: "选项A" },
              { value: "B", label: "选项B" },
              { value: "C", label: "选项C" },
              { value: "D", label: "选项D" },
            ]}
          />
        </Form.Item>

        <Form.Item<FieldType>
          label="解析（文字）"
          name="explainText"
          rules={[
            {
              required: false,
              message: "请上传题目解析文字",
            },
          ]}
        >
          <TextArea
            rows={6}
            placeholder={"请上传题目解析文字"}
            maxLength={1000}
          />
        </Form.Item>

        <Form.Item<FieldType>
          label="解析（图片）"
          name="explainImg"
          required
          // 下面两条必须存在
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload action={uploadUrl} listType="picture" maxCount={1}>
            <Button type="primary" icon={<UploadOutlined />}>
              上传解析截图
            </Button>
          </Upload>
        </Form.Item>

        <Form.Item<FieldType>
          label="难度系数"
          name="rate"
          rules={[{ required: true, message: "最低1星，最高5星" }]}
        >
          <Rate />
        </Form.Item>

        <Form.Item<FieldType> label="知识点" name="knowledge" required>
          <SelectKnowledgeTree onChange={handleChildChange} />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交题目
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default FunctionSubmitChoice;
